<template>
<view class="asso_page">
    <!-- 背景图 -->
    <image class="asso_bgc" :src="clubDetail.club_avatar" mode="aspectFill"></image>
	<view class="bg_cover"></view>
    <!-- 社团信息 -->
    <view class="association">
        <view class="asso_info_wrap">
            <!-- 标题信息 -->
            <view class="title_wrap">
				<view class="title_left">
					<image class="asso_icon" :src="clubDetail.club_avatar" mode="aspectFill"></image>
					<text class="asso_title">{{ clubDetail.name }}</text>
				</view>
				<view class="title_right">
					<text>{{ isAdd ? '已加入' : '未加入' }}</text>
				</view>
            </view>
            <!-- 社团介绍 -->
            <view class="asso_introduction_wrap">
                <view class="introduction">{{ clubDetail.description }}</view>
                <!-- <view class="more">查看更多</view> -->
            </view>
            <!-- 社团操作 -->
            <view class="asso_options" bindtap="handleJoin">
                <view class="option_item">
					<view v-if="userInfo.user_id === clubDetail.leader_id"><van-icon name="chat-o" :info="pendingClubMemberCount" @click="auitMember" /></view>
					<template v-else>
						<!-- 退出社团 -->
						<van-icon v-if="joinedStatus === 0" class="opt_icon" name="exchange" @click="quitClub"/>
						<!--审核中 -->
						<van-icon v-else-if="joinedStatus === 1" class="opt_icon" name="ellipsis" />
						<!-- 被拒绝了 -->
						<van-icon v-else-if="joinedStatus === 2" class="opt_icon" name="cross" />
						<!-- 加入社团 -->
						<van-icon v-else class="opt_icon" name="exchange" @click="addClub" />
					</template>
                   
                </view>
            </view>
            <!-- 社团负责人信息展示 -->
            <view class="leaders_wrap">
                <view class="title_bar">
                    <view class="title_text">负责人</view>
					<view class="more" v-if="userInfo.user_id === clubDetail.leader_id">审核成员</view>
                    <template v-else>
						<view class="more">{{ joinedStatusValue }}</view>
					</template>
                </view>
                <!-- 此处仅仅展示社团会长、部长等其他信息在【查看更多中以列表的形式展示出来】 -->
                <scroll-view scroll-x="true" style="width: 650rpx" :enhanced="true" :show-scrollbar="false">
                    <view class=" leader_info_container ">
                        <view class="leader_info_item " @click="handleToInfo">
                            <image class="avatar " :src="clubDetail.avatar_url" mode="aspectFill "></image>
                            <view class="leader_text_info ">
                                <navigator class="name" :url="`/pages/my-home/my-home?user_id=${clubDetail.leader_id}`">{{ clubDetail.leaderName }}</navigator>
                                <view class="position ">社长</view>
                            </view>
                        </view>
                    </view>

                </scroll-view> 

            </view>
        </view>
        <!-- 社团资讯、活动、成员管理（仅管理员可见） -->
        <view class="asso_tabs">
            <van-tabs :active="0"  color="#397BFF" tab-class="tab_normal" tab-active-class="tab_active" :ellipsis="false" swipeable animated>
                <van-tab title="活动 ">
                    <template v-for="item in clubEventList" :key="item.id">
                    	<ActivityItem :event="item" />
                    </template>
                </van-tab>
                <van-tab title="成员 ">
                    <view class="user_info_item" v-for="item in clubMemebrs" @click="handleMemberOption">
                        <image class="avatar" :src="item.avatar_url" mode="aspectFill"></image>
                        <navigator class="username" :url="`/pages/my-home/my-home?user_id=${item.user_id}`">{{ item.name }}</navigator>
                        <van-icon v-if="userInfo.user_id === clubDetail.leader_id" @click="showOptions(item)" class="options" name="more-o" />
                    </view>
                </van-tab>
            </van-tabs>
        </view>
    </view>
	
	<uni-popup ref="alertJoinDialog" type="dialog">
		<uni-popup-dialog
			type="error"
			cancelText="取消"
			confirmText="确定"
			title="提示"
			content="确定参加社团吗"
			@confirm="joinDialogConfirm"
		></uni-popup-dialog>
	</uni-popup>
	
	
	<uni-popup ref="alertQuitDialog" type="dialog">
		<uni-popup-dialog
			type="error"
			cancelText="取消"
			confirmText="确定"
			title="提示"
			content="确定退出社团吗"
			@confirm="quitDialogConfirm"
		></uni-popup-dialog>
	</uni-popup>
    <!-- 成员操作的动作面板 -->
    <van-action-sheet :show="isOptionsShow" :actions="action" cancel-text="取消" @cancel="onMemberOptionsClose" @close="onMemberOptionsClose" @select="onMemberOptionsSelect" />
</view>
</template>

<script setup>
import { onLoad, onShow} from '@dcloudio/uni-app'	
import { storeToRefs } from 'pinia'
import { computed, ref } from 'vue'
	
import useClubStore from '@/store/club.js'
import useEventStore from '@/store/event.js'
import useLoginStore from '@/store/login.js'
import ActivityItem from '@/components/activity-item/activity-item.vue'
import { LIMIT } from '../../global/contants'

const clubStore = useClubStore()
const eventStore = useEventStore()
const loginStore = useLoginStore()
const { clubDetail, clubMemebrs, clubMemberInfo, pendingClubMemberCount } = storeToRefs(clubStore)
const { eventList } = storeToRefs(eventStore)
const { userInfo } = storeToRefs(loginStore)
const clubEventList = computed(() => {
	return eventList.value.filter(item => ['approved','ongoing','finished'].includes(item.status))
})
const clubId = ref('')
onLoad((options) => {
	const { club_id } = options
	clubId.value = club_id
	clubStore.getClubDetaiByIdAction(club_id)
	eventStore.searchEventByClubIdAction(club_id)
})
onShow(() => {
	clubStore.getClubMemberByClubIdAction({id:clubId.value, limit:LIMIT})
	clubStore.getClubMemberStatusAction(clubId.value)
	clubStore.getPendingMemberCountAction(clubId.value)
})
// 判断是否加入
const isAdd = computed(() => {
	return clubMemebrs.value.some(item => (item.user_id === userInfo.value.user_id && item.status === 'active')) || userInfo.value.user_id === clubDetail.value.leader_id
})

// 判断是否在审核中
const joinedStatus = computed(() => {
	if(clubMemberInfo.value) {
		if(clubMemberInfo.value.status === 'pending') {
			return 1
		}else if(clubMemberInfo.value.status === 'active') {
			return 0
		}else {
			return 2
		}
	}else {
		return -1
	}
})

// 根据状态返回相对于的提示
const joinedStatusValue = computed(() => {
	switch(joinedStatus.value) {
		case -1:
			return '加入社团'
		case 0:
			return '退出社团'
		case 1:
			return '审核中...'
		case 2:
			return '已被拒绝'
	}
})

setTimeout(() => {
	console.log(isAdd.value);
	console.log(clubMemebrs.value);
},1000)

// 申请加入社团
const alertJoinDialog = ref('')
function addClub() {
	alertJoinDialog.value.open()
}

function joinDialogConfirm() {
	clubStore.joinClubAction(clubDetail.value.id)
}

// 申请退出社团
const alertQuitDialog = ref('')
function quitClub() {
	alertQuitDialog.value.open()
	
}
function quitDialogConfirm() {
	clubStore.quitClubAction(clubDetail.value.id)
}

// 移除成员操作
const action = [{name:'移除成员'}]
const removeMemberInfo = ref('')
const isOptionsShow = ref(false)

function showOptions(item) {
	isOptionsShow.value = true
	removeMemberInfo.value = item
}

function onMemberOptionsClose() {
	isOptionsShow.value = false
	console.log(removeMemberInfo.value);
}

function onMemberOptionsSelect(e) {
	clubStore.deleteClubMemebrAction(clubDetail.value.id, removeMemberInfo.value.user_id)
}

// 审核成员
function auitMember() {
	uni.navigateTo({
		url:`/pages/auit-member/auit-member?club_id=${clubDetail.value.id}`
	})
}
</script>

<style lang="less" scoped>
.asso_page {
    background-color: #fff;
    position: relative;
    width: 100%;
	.bg_cover,.asso_bgc {
		position: absolute;
		left: 0;
		top: 0;
		z-index: -1;
	}
	
	.bg_cover {
		background-color: rgba(0, 0, 0, 0.4);
		backdrop-filter: blur(20px);
	}
    .asso_bgc {
        width: 100%;
        height: 550rpx;
        z-index: 0;
	
    }

    .association {
        width: 750rpx;
        z-index: 99;
        margin-top: -20rpx;
        position: absolute;
        left: 0;
        top: 500rpx;
        border-radius: 25rpx 25rpx 0 0;
        overflow: hidden;

        .asso_info_wrap {
            padding: 40rpx;
            background-color: #fff;
            padding-bottom: 10rpx;

            .title_wrap {
                display: flex;
                align-items: center;
				justify-content: space-between;
                padding-bottom: 20rpx;
				.title_left {
					vertical-align: middle;
					display: flex;
					align-items: center;
				}
				.title_right {
					font-size: 27rpx;
					color: rgba(0, 0, 0, 0.6);
				}
				

                .asso_icon {
                    width: 100rpx;
                    height: 100rpx;
                    border-radius: 50%;
                }

                .asso_title {
                    font-size: 40rpx;
                    font-weight: 700;
                    margin-left: 30rpx;
                }
            }

            .asso_introduction_wrap {
                position: relative;
                top: 0;
                left: 0;

                .introduction {
                    font-size: 29rpx;
                    line-height: 45rpx;
                }

                .more {
                    position: absolute;
                    bottom: -10rpx;
                    right: 0rpx;
                    font-size: 25rpx;
                    display: flex;
                    align-items: center;
                    color: var(--lightTextColor);
                }
            }

            .asso_options {
                margin-top: 10rpx;
                padding: 15rpx;
                display: flex;
                justify-content: flex-end;
                color: var(--darkColor);

                .option_item {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    padding: 10rpx;

                    .opt_icon {
                        font-size: 45rpx;
                        font-weight: 700;
                    }

                    .opt_name {
                        font-size: 26rpx;
                    }
                }

            }

            .leaders_wrap {
                .title_bar {
                    display: flex;
                    justify-content: space-between;
                    padding-top: 10rpx;
                    padding-bottom: 20rpx;

                    .title_text {
                        font-size: 35rpx;
                        font-weight: 700;
                    }

                    .more {
                        font-size: 25rpx;
                        display: flex;
                        align-items: center;
                        color: var(--lightTextColor);
                    }
                }

                .leader_info_container {
                    display: flex;
                    flex-wrap: nowrap;
                    width: 1400px;

                    .leader_info_item {
                        display: flex;
                        width: 320rpx;

                        .avatar {
                            width: 110rpx;
                            height: 110rpx;
                            border-radius: 50%;
                            margin-right: 20rpx;
                        }

                        .leader_text_info {
                            padding: 5rpx 0;

                            .name {
                                font-weight: 700;
                                font-size: 30rpx;
                            }

                            .position {
                                margin-top: 10rpx;
                                font-size: 28rpx;
                                color: var(--lightTextColor);

                            }
                        }

                    }
                }

            }
        }

        .asso_tabs {
            .user_info_item {
                background-color: #fff;
                display: flex;
                align-items: center;
                margin: 10rpx 0;
               
                padding: 15rpx 30rpx;
                .avatar {
                   
                    width: 90rpx;
                    height: 90rpx;
                    border-radius: 50%;
                    margin-right: 25rpx;
                }

                .username {
                    flex: 1;
                    font-size: 30rpx;
                }
                .options{
                    margin-right: 50rpx;
                    font-weight: 700;
                    font-size: 45rpx;
                    color: var(--lightTextColor);
                }
            }
        }

    }

}
</style>
